<template>
  <div class="shop-list">
    <ul v-if="shopList.length" v-load-more="loadMore">
      <router-link
        tag="li"
        class="shop-item"
        v-for="shopItem in shopList"
        :key="shopItem.id"
        :to="{path:'shop', query:{id:shopItem.id}}"
      >
        <div class="shop-img">
          <img :src="imgBaseUrl + shopItem.image_path">
        </div>
        <div class="shop-info">
          <div class="line1">
            <h4 class="shop-name ellipsis" :class="shopItem.is_premium? 'premium': ''">{{shopItem.name}}</h4>
            <ul class="shop-supports">
              <li v-for="support in shopItem.supports" :key="support.id">{{support.icon_name}}</li>
            </ul>
          </div>
          <div class="line2">
            <div class="shop-start">店铺星级：{{shopItem.rating}}</div>
            <div class="shop-sale-num">月售：{{shopItem.recent_order_num}}单</div>
            <ul class="shop-deliverys">
              <li class="icon1" v-if="shopItem.delivery_mode">{{shopItem.delivery_mode.text}}</li>
              <li class="icon2" v-if="shopItem.supports.filter(item=>item.icon_name === '准').length > 0">准时达</li>
            </ul>
          </div>
          <div class="line3">
            <div class="shop-fee">
              ¥{{shopItem.float_minimum_order_amount}}起送
              /
              {{shopItem.piecewise_agent_fee.tips}}
            </div>
            <div class="shop-distance-time">
              <span v-if="Number(shopItem.distance)">
                {{shopItem.distance > 1000? (shopItem.distance/1000).toFixed(2) + 'km': shopItem.distance + 'm'}}
                <span
                  class="segmentation"
                >/</span>
              </span>
              <span v-else>{{shopItem.distance}}</span>
              <span class="segmentation">/</span>
              <span class="time">{{shopItem.order_lead_time}}</span>
            </div>
          </div>
        </div>
      </router-link>
    </ul>
    <ul v-else class="animation-opactiy">
      <li class="shop-placeholder" v-for="i in 16" :key="i">
        <img src="../assets/shop-placeholder.svg" class="list_back_svg">
      </li>
    </ul>
    <p v-if="isEnd" class="end-tips">没有更多了</p>
    <Loading v-show="isLoading"/>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { loadMore } from '../etc/directives';
import { getShopList } from '../etc/datas';
import { imgBaseUrl } from '../etc/config';
import Loading from './Loading';
export default {
  components: {
    Loading
  },
  data() {
    return {
      imgBaseUrl,
      visible: true,
      page: 1,
      shopList: [],
      isEnd: false,
      isLoading: false
    };
  },
  props: ['paramsVersion', 'params'],
  beforeMount() {
    this.getShopList(false);
  },
  watch: {
    paramsVersion() {
      this.reload();
    }
  },
  methods: {
    loadMore() {
      if (this.isLoading || this.isEnd) {
        return;
      }
      this.page++;
      this.getShopList(true);
    },
    getShopList(pushMode) {
      this.isLoading = true;
      let params = this.params || { deliveries: [], supports: [] };
      getShopList(
        data => {
          this.isLoading = false;
          this.shopList = pushMode ? this.shopList.concat(data) : data;
        },
        this.position,
        this.page,
        params.categoryId,
        params.subCategoryId,
        params.sortType,
        params.deliveries
          .filter(support => support.selected)
          .map(support => support.id)[0],
        params.supports
          .filter(support => support.selected)
          .map(support => support.id)
      );
    },
    reload() {
      this.page = 1;
      this.getShopList(false);
    }
  },
  computed: {
    ...mapState(['position'])
  },
  directives: {
    'load-more': loadMore
  }
};
</script>

<style lang="scss">
@import 'src/styles/mixin';
.shop-list {
  background: #fff;
  .shop-item {
    display: flex;
    border-bottom: 0.025rem solid #f1f1f1;
    padding: 0.7rem 0.4rem;
  }
  .shop-img img {
    width: 2.7rem;
    height: 2.7rem;
    display: block;
    margin-right: 0.4rem;
  }
  .shop-info {
    flex: auto;
    .line1 {
      @include fj;
      align-items: center;
    }
    .line2 {
      @include fj(space-between);
      height: 0.6rem;
      margin-top: 0.52rem;
    }
    .line3 {
      margin-top: 0.52rem;
      @include fj;
      @include sc(0.5rem, #333);
    }
  }
  .premium::before {
    content: '品牌';
    display: inline-block;
    font-size: 0.5rem;
    line-height: 0.6rem;
    color: #333;
    background-color: #ffd930;
    padding: 0 0.1rem;
    border-radius: 0.1rem;
    margin-right: 0.2rem;
  }
  .shop-name {
    width: 8.5rem;
    color: #333;
    padding-top: 0.01rem;
    @include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
    font-weight: 700;
  }
  .shop-supports {
    display: flex;
    transform: scale(0.8);
    margin-right: -0.3rem;
    li {
      @include sc(0.5rem, #999);
      border: 0.025rem solid #f1f1f1;
      padding: 0 0.04rem;
      border-radius: 0.08rem;
      margin-left: 0.05rem;
    }
  }
  .shop-start {
    display: flex;
    @include sc(0.4rem, #666);
  }
  .shop-sale-num {
    display: flex;
    transform: scale(0.8);
    margin-left: -0.2rem;
    @include sc(0.4rem, #666);
  }
  .shop-deliverys {
    display: flex;
    align-items: center;
    transform: scale(0.7);
    min-width: 5rem;
    justify-content: flex-end;
    margin-right: -0.8rem;
    li {
      font-size: 0.4rem;
      padding: 0.04rem 0.08rem 0;
      border-radius: 0.08rem;
      margin-left: 0.08rem;
      border: 1px;
    }
    .icon1 {
      color: #fff;
      background-color: $blue;
      border: 0.025rem solid $blue;
    }
    .icon2 {
      color: $blue;
      border: 0.025rem solid $blue;
    }
  }
  .shop-fee {
    margin-left: -0.25rem;
    transform: scale(0.9);
    @include sc(0.5rem, #666);
  }
  .shop-distance-time {
    transform: scale(0.9);
    margin-right: -0.15rem;
    span {
      color: #999;
    }
    .time {
      color: $blue;
    }
    .segmentation {
      color: #ccc;
    }
  }
  .shop-placeholder {
    height: 4.85rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .end-tips {
    @include sc(0.5rem, #666);
    text-align: center;
    line-height: 2rem;
  }
}
</style>